<template>
    <el-dialog v-model="dialogFormVisible" @close="close" :title="title">
        <el-form ref="dialogForm" :model="dialogFormData">
            <slot name="upload"></slot>
            <el-form-item v-for="(v,k) in dialogFormData" :key="k" :label="v.label" :label-width="formLabelWidth" :prop="(k+'.value')" :rules="{
                required:true,
                trigger:'blur',
                message:v.label +'不能为空'
            }">
                <el-input v-model="dialogFormData[k].value" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm(dialogForm)">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref,watchEffect,toRefs } from 'vue'
//封装dialog组件的想法：
//1.根据传入的数据，自动创建出form表单元素（想要使组件实现各种功能，就需要使用插槽，成为动态的），form表单的元素类型比较多，现在默认使用input
//2.表单需要具备校验属性的功能
//3.表单通过和不通过，可以回调对应的方法
//4.控制显示隐藏的属性
//控制labelWidth的属性
//声明props

//dialog使用说明
//属性
//1.visible:Boolean
//2.dialogFormData:Object 表单的数据 {name：{label:"item的描述"，value:"对应的值"}}
//3.formLabelWidth:String label的宽度
//4.title:String dialog的标题
//事件
//validateSuccess 点击确定按钮，表单校验通过之后触发，回传一个实例引用
//dialogCancel 点击取消按钮 触发的事件
//closed dialog被关闭时触发的事件
let props = defineProps({
    //dialog标题
    title:{
        type:String,
        default(){
            
            return "增加学员信息"
        }
    },
    //控制表单显示隐藏的
    visible:{
        type:Boolean,
        default(){
            
            return false
        }
    },
    //控制表单的校验
    // rules:{
    //     type:Array,
    //     default(){
    //         return []
    //     },
    // },
    
    //弹窗表单中的数据来源
    dialogFormData:{
        type:Object,
        default(){
            return {}
        },
    },
    formLabelWidth:{
        type:String,
        default(){
            return '140px'
        },
    },
})
//表明表单校验通过之后的回调
let emits = defineEmits(['validataSuccess','dialogCancel','closed'])
//dialogFormVisible的初始值，定义为传递下来的初始值
let dialogFormVisible = ref(false)
//使用watchEffect侦听visible props的变化
let {visible} = toRefs(props)
//实时侦听visible props的变化，控制dialog的显示或隐藏 
watchEffect(()=>{
    dialogFormVisible.value = visible.value
})
//点击取消 
let cancel = () =>{
    dialogFormVisible.value = true
    emits('dialogCancel')
}
//点击确定
//声明一个ref引用dialog的结构
let dialogForm = ref()
let confirm = (form) =>{
form.validate(valid=>{
    if(valid ){
        //表单校验通过
        emits('validateSuccess',dialogForm)
    }else{
        //表单校验不通过
    }
})
}
//dialog被关闭时触发的事件
let close =()=>{
    emits('closed')
}
</script>